觀看金魚都能懂網頁設計入門 17

https://codepen.io/mikeyam/pen/WNwPzpy 小練習

從排版練習中，學到許多垂直置中技巧

垂直置中

logo部分運用inline-block特性，可以用padding把高度撐高

.logo{
    display: inline-block;
    padding: 6px;
}

運用flex-direction: column; justify-content: center; 把文字垂直置中

.product .text{
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 20px;
    text-align: center;
}

消除img邊框小問題

運用vertical-align: bottom;方法把img邊框問題做處理，因為inline的特性才會有的小問題

.product .box img{
    width: 100%;
    vertical-align: bottom;
}

偽元素運用

.path li + li::before{
    content: '/';
    color: #aaa;
    position: absolute;
    left: 0;
}

選擇器運用

https://code.tutsplus.com/zh-hant/tutorials/the-30-css-selectors-you-must-memorize--net-16048

這個被稱為相鄰兄弟選擇器。 它僅僅會選擇剛好在左邊元素之前的元素，選擇第一個li之後都會運用到偽元素
.path li + li::before{
    content: '/';
    color: #aaa;
    position: absolute;
    left: 0;
}
選擇它的直接的子對象，只選擇service 第一個 h2
.service > h2{
    width: 960px;
    margin: auto;
    text-align: center;
    font-size: 40px;
    padding: 20px 0;
}
選擇它的直接的子對象，只選擇service 第一個 p
.service > p{
    width: 960px;
    margin: auto;
    text-align: center;
    padding-bottom: 40px;
}